<template>
	<view class="pageBox">
		<image src="http://www.bobei.shop/static/third/loginBg.png" mode="aspectFit" class="loginBg"
			:style="{position: 'absolute', left: 0, top: statusBarHeight + 'px', zIndex: 1}"></image>
		<view class="content">
			<view :style="{height: statusBarHeight + 'px' }"></view>
			<view class="welcome">WELCOM YOU</view>
			<image src="http://www.bobei.shop/static/third/boBei.png" mode="scaleToFill" class="boBei"></image>

			<view class="hello">
				<view class="helloItem">
					您好，
				</view>
				<view class="helloItem">
					伯贝商城欢迎您
				</view>
			</view>

			<view class="quality">
				<view class="qualityItem">
					品质保障：
				</view>
				<view class="qualityItem">
					质量认证，假一赔三，买的更加放心。
				</view>
			</view>

			<!--  #ifdef  APP-PLUS -->
			<view class="wechatBox flex-row" @click="wechatLogin">
				<image src="http://www.bobei.shop/static/third/wechatIcon.png" mode="scaleToFill" class="wechatIcon">
				</image>
				<view class="wechatLogin">
					微信用户一键登录
				</view>
			</view>
			<!--  #endif -->



			<view class="mobileBox flex-row" @click="goLogin">
				<image src="http://www.bobei.shop/static/third/mobileIcon.png" mode="scaleToFill" class="mobileIcon">
				</image>
				<view class="mobileLogin">
					手机号和密码登录
				</view>
			</view>

			<view class="accountBox flex-center">
				<view class="no">
					没有帐号？去
				</view>
				<button class="regBtn" :plain="true" @click="goRegister">注册账号</button>
				<view class="line"></view>
				<button class="forgetBtn" :plain="true" @click="goForget">忘记密码？</button>
			</view>

			<view class="bomBox flex-center">
				<view class="bomItem flex-center" @click="goHome">
					<image src="http://www.bobei.shop/static/third/goHome.png" mode="scaleToFill" class="goHome">
					</image>
					<view class="bomTitle">
						返回首页
					</view>
				</view>
				<!--  #ifdef  H5 -->
				<view class="bomItem flex-center" @click="onDownloadBtn">
					<image src="http://www.bobei.shop/static/third/logoIcon.png" mode="scaleToFill" class="logoIcon">
					</image>
					<view class="bomTitle">
						伯贝下载
					</view>
				</view>
				<!--  #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: "",
				download: {},
			}
		},

		onShow() {
			this.statusBarHeight = this.$mySysInfo().top;
			// #ifdef  H5
			this.getDownload()
			// #endif
		},

		methods: {
			wechatLogin() {
				// 跳转完善个人资料页面
				// uni.navigateTo({
				// 	url: "/setting/improveData"
				// })
				let that = this;
				uni.login({ 
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: function(event){
						console.log("微信登录:",event)
						const {code} = event
						console.log(code);
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						that.$post({
							module: 'Wechat',
							interface: 1002,
							data: {
								code: event.code,
							},
						}).then(res => {
							
							uni.setStorageSync('token', res.accessToken)
							uni.showToast({
								icon: "none",
								title: "登录成功",
								duration: 1000
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/home/index'
								})
							}, 1000)
						}).catch((error) => {W
							console.log("微信登录传code报错",error)
						})
					},
					fail: function (err) {
				        // 登录授权失败  
				        // err.code是错误码
								// console.log("登录授权失败err:",err);
				    }
				})
			},

			goRegister() { // 跳转注册页
				uni.navigateTo({
					url: "/pages/login/register"
				})
			},
			goLogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			goForget() {
				uni.navigateTo({
					url: "/pages/login/forget"
				})
			},
			goHome() {
				uni.switchTab({
					url: "/pages/home/index"
				})
			},
			onDownloadBtn() {
				uni.getSystemInfo({
					success: (params) => {
						// console.log(params, "系统")
						switch (params.osName) {
							case 'android':
								// // console.log('运行Android上')
								window.location.href = this.download.appUrl
								break;
							case 'ios':
								// // console.log('运行iOS上')
								// window.location.href = this.download.iosUrl
								uni.showToast({
									title: '开发中',
									icon: 'none',
									duration: 1500
								});
								break;
						}
					}
				})
			},
			getDownload() {
				this.$post({
					module: 'Utils',
					interface: 1003,
				}).then(res => {
					this.download = res;
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: calc(100vh - var(--window-top));
		background: linear-gradient(180deg, #EC615C 0%, #FFFFFF 100%);
		position: relative;

		.loginBg {
			width: 100%;
			transform: rotate(180deg);
		}

		.content {
			position: relative;
			z-index: 2;
			padding: 112rpx 46rpx 0;

			.welcome {
				font-size: 72rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 84rpx;
				-webkit-box-reflect: below -30% -webkit-linear-gradient(transparent, transparent 30%, rgba(0, 0, 0, .8)); // 倒影
			}

			.boBei {
				width: 380rpx;
				height: 146rpx;
				margin-top: 68rpx;
			}

			.hello {
				margin-top: 48rpx;

				.helloItem {
					font-size: 56rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #000000;
					line-height: 66rpx;
				}
			}

			.quality {
				margin-top: 72rpx;

				.qualityItem {
					font-size: 36rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 42rpx;
					margin-top: 24rpx;
				}
			}

			.wechatBox {
				width: 564rpx;
				height: 88rpx;
				background: #EC615C;
				border-radius: 44rpx;
				margin: 154rpx auto 0;
				padding-left: 90rpx;

				.wechatIcon {
					width: 64rpx;
					height: 64rpx;
				}

				.wechatLogin {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: normal;
					color: #FFFFFF;
					line-height: 33rpx;
					margin-left: 56rpx;
				}
			}

			.mobileBox {
				width: 564rpx;
				height: 88rpx;
				background: #F7F7F7;
				border-radius: 44rpx;
				padding-left: 98rpx;
				margin: 64rpx auto 0;

				.mobileIcon {
					width: 48rpx;
					height: 48rpx;
				}

				.mobileLogin {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: normal;
					color: #333333;
					line-height: 33rpx;
					margin-left: 64rpx;
				}

			}

			.accountBox {
				margin: 52rpx auto 0;

				.no {
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: normal;
					color: #000000;
					line-height: 28rpx;
				}

				.regBtn {
					border: none;
					margin: 0;
					padding: 0;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: normal;
					color: #F2615F;
					line-height: 28rpx;
				}

				.line {
					width: 2rpx;
					height: 18rpx;
					background-color: #A1AAB4;
					margin: 0 18rpx;
				}

				.forgetBtn {
					border: none;
					margin: 0;
					padding: 0;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: normal;
					color: #120C45;
					line-height: 28rpx;
				}
			}

			.bomBox {
				margin: 24rpx auto 0;

				.bomItem {
					flex-direction: column;
					margin: 0 56rpx;

					.goHome {
						width: 72rpx;
						height: 72rpx;
					}

					.logoIcon {
						width: 64rpx;
						height: 72rpx;
					}

					.bomTitle {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 28rpx;
						margin-top: 20rpx;
					}
				}
			}
		}
	}
</style>
